<!DOCTYPE html>
<html>
<head>
	<title>PhotoSwipe</title>
	<meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" />
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	
	<link href="styles.css" type="text/css" rel="stylesheet" />
	
	<link href="../assets/photoswipe.css" type="text/css" rel="stylesheet" />
	
	<script type="text/javascript" src="../lib/klass.min.js"></script>
	<script type="text/javascript" src="../lib/code.util-1.0.6/code.util-1.0.6.js"></script>
	
	<script type="text/javascript" src="../image.js"></script>
	<script type="text/javascript" src="../image.class.js"></script>
	<script type="text/javascript" src="../cache.js"></script>
	<script type="text/javascript" src="../cache.class.js"></script>
	<script type="text/javascript" src="../documentoverlay.js"></script>
	<script type="text/javascript" src="../documentoverlay.class.js"></script>
	<script type="text/javascript" src="../carousel.js"></script>
	<script type="text/javascript" src="../carousel.class.js"></script>
	<script type="text/javascript" src="../carousel.class.animation.js"></script>
	<script type="text/javascript" src="../toolbar.js"></script>
	<script type="text/javascript" src="../toolbar.class.js"></script>
	<script type="text/javascript" src="../uilayer.js"></script>
	<script type="text/javascript" src="../uilayer.class.js"></script>
	<script type="text/javascript" src="../zoompanrotate.js"></script>
	<script type="text/javascript" src="../zoompanrotate.class.js"></script>
	<script type="text/javascript" src="../photoswipe.js"></script>
	<script type="text/javascript" src="../photoswipe.class.js"></script>
	
	
	<script type="text/javascript">
		
		/* 
			Overview: 
			---------
			
			Debug version to test inline functionality
		
		*/
		
		(function(window, Util, PhotoSwipe){
			
			Util.Events.domReady(function(e){
				
				var instance1, instance2;
				
				instance1 = PhotoSwipe.attach(
					[
						{ url: 'images/full/001.jpg', caption: 'Image 001'},
						{ url: 'images/full/002.jpg', caption: 'Image 002'},
						{ url: 'images/full/003.jpg', caption: 'Image 003'},
						{ url: 'images/full/004.jpg', caption: 'Image 004'},
						{ url: 'images/full/005.jpg', caption: 'Image 005'},
						{ url: 'images/full/006.jpg', caption: 'Image 006'},
						{ url: 'images/full/007.jpg', caption: 'Image 007'},
						{ url: 'images/full/008.jpg', caption: 'Image 008'},
						{ url: 'images/full/009.jpg', caption: 'Image 009'}
					],
					{
						target: Util.DOM.find('#PhotoSwipeTarget1')[0],
						getImageSource: function(obj){
							return obj.url;
						},
						getImageCaption: function(obj){
							return obj.caption;
						}
					}
				);
				
				
				instance2 = PhotoSwipe.attach(
					[
						{ url: 'images/full/009.jpg', caption: 'Image 009'},
						{ url: 'images/full/010.jpg', caption: 'Image 010'},
						{ url: 'images/full/011.jpg', caption: 'Image 011'},
						{ url: 'images/full/012.jpg', caption: 'Image 012'},
						{ url: 'images/full/013.jpg', caption: 'Image 013'},
						{ url: 'images/full/014.jpg', caption: 'Image 014'},
						{ url: 'images/full/015.jpg', caption: 'Image 015'},
						{ url: 'images/full/016.jpg', caption: 'Image 016'},
						{ url: 'images/full/017.jpg', caption: 'Image 017'},
						{ url: 'images/full/018.jpg', caption: 'Image 018'}
					],
					{
						target: Util.DOM.find('#PhotoSwipeTarget2')[0],
						getImageSource: function(obj){
							return obj.url;
						},
						getImageCaption: function(obj){
							return obj.caption;
						}
					}
				);
				
				
				
				window.setTimeout(function(){
					window.scrollTo(0,0);
					instance1.show(0);
					instance2.show(0);
				}, 250);
				
			});
			
			
		}(window, window.Code.Util, window.Code.PhotoSwipe));
		
	</script>
	
</head>
<body>

<div id="MainContent">

	<div id="PhotoSwipeTarget1" style="width: 100%; height: 200px;"></div>
	
	<div id="PhotoSwipeTarget2" style="width: 100%; height: 200px; margin-top: 20px;"></div>
	
</div>	


</body>
</html>
